.bulletin_inline,
.bulletin_block {
    overflow: hidden;
}

.bulletin_inline {
    position: relative;
    width: 100%;
    margin-inline: .25rem;
}

.bulletin_inline:before,
.bulletin_inline:after {
    display: block;
    position: absolute;
    top: 0;
    width: 2rem;
    height: 100%;
    content: "";
    z-index: 1;
}

.bulletin_inline:before {
    left: 0;
    background-image: linear-gradient(270deg, rgba(var(--bs-success-rgb), 0) 0%, rgba(var(--bs-success-rgb), 1) 98%);
}

.bulletin_inline:after {
    right: 0;
    background-image: linear-gradient(90deg, rgba(var(--bs-success-rgb), 0) 0%, rgba(var(--bs-success-rgb), 1) 98%);
}

.bulletin_block {
    position: relative;
    height: 25vh;
    overflow-y: scroll;
    scrollbar-width: var(--scrollbar-width);
}

.bulletin_block:before,
.bulletin_block:after {
    display: block;
    position: sticky;
    width: 100%;
    height: 3rem;
    content: "";
    z-index: 1;
}

.bulletin_block:before {
    top: 0;
    background-image: linear-gradient(0deg, rgba(var(--bs-body-bg-rgb), 0) 0%, rgba(var(--bs-body-bg-rgb), 1) 98%);
}

.bulletin_block:after {
    bottom: 0;
    background-image: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0) 0%, rgba(var(--bs-body-bg-rgb), 1) 98%);
}

.list-group-numbered.bulletin-inner > :nth-child(n)::before {
    margin-right: .2rem;
}

.list-group-numbered.bulletin-inner > :nth-child(n) > a,
.list-group-numbered.bulletin-inner > :nth-child(n)::before {
    color: #35ce0b !important;
}

.list-group-numbered.bulletin-inner > :nth-child(1) > a,
.list-group-numbered.bulletin-inner > :nth-child(1)::before {
    color: #8a2be2 !important;
}

.list-group-numbered.bulletin-inner > :nth-child(2) > a,
.list-group-numbered.bulletin-inner > :nth-child(2)::before {
    color: #ff0000 !important;
}

.list-group-numbered.bulletin-inner > :nth-child(3) > a,
.list-group-numbered.bulletin-inner > :nth-child(3)::before {
    color: #c00a5c !important;
}

.bulletin-animation {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-timeline: auto;
}

.bulletin-container:hover .bulletin-animation {
    animation-play-state: paused !important;
}

.bulletin-animation > *::marker {
    padding-left: 29px;
}

.animation-paused {
    animation-play-state: paused;
}

.delay-1s {
    animation-delay: 1s;
}

.delay-3s {
    animation-delay: 3s;
}

.delay-5s {
    animation-delay: 5s;
}

.duration-5s {
    animation-duration: 5s;
}

.duration-10s {
    animation-duration: 10s;
}

.duration-20s {
    animation-duration: 20s;
}

.duration-30s {
    animation-duration: 20s;
}

.duration-s {
    animation-duration: 15s;
}

@media (min-width: 576px) {
    .duration-s {
        animation-duration: 20s;
    }
}

@media (min-width: 768px) {
    .duration-s {
        animation-duration: 25s;
    }
}

@media (min-width: 992px) {
    .duration-s {
        animation-duration: 30s;
    }
}

@media (min-width: 1200px) {
    .duration-s {
        animation-duration: 35s;
    }
}

@media (min-width: 1400px) {
    .duration-s {
        animation-duration: 40s;
    }
}

.animationName-marquee {
    animation-name: marquee;
    padding-left: 100%;
}

.animationName-marquee-top {
    animation-name: marquee-top;
    padding-top: 25vh;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes marquee-top {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}
